<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<!--<input type="button" value="加" onclick="f1()">
<input type="button" value="减" onclick="f2()">
<input type="button" value="乘" onclick="f3()">
<input type="button" value="除" onclick="f4()">-->

<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>结果:<span>span</span></div>
<script>
    /*加: 两个数的相加 为 i1.value*1+i2.value*1*/
    /*若：两个元素的值不乘以1,则表示为两个字符串拼接,如:i1.value+i2.value*/
    /*乘,除,减 可以两个元素值直接运算:例如:i1.value*i2.value
    * i1.value/i2.value  i1.value-i2.value*/
    let i1=document.querySelector("#i1");
    let i2=document.querySelector("#i2");
    let s=document.querySelector("span");
    function f1(){
        if (isNaN(i1.value)|| isNaN(i2.value)){
            s.innerText="输入的数据类型错误";
            return;
        }
        s.innerText=i1.value*1+i2.value*1;
    }
    function f2(){
        if (isNaN(i1.value)|| isNaN(i2.value)){
            s.innerText="输入的数据类型错误";
            return;
        }
        s.innerText=i1.value-i2.value;
    }
    function f3(){
        if (isNaN(i1.value)|| isNaN(i2.value)){
            s.innerText="输入的数据类型错误";
            return;
        }
        s.innerText=i1.value*i2.value;
    }
    function f4(){
        if (isNaN(i1.value)|| isNaN(i2.value)){
            s.innerText="输入的数据类型错误";
            return;
        }
        s.innerText=i1.value/i2.value;
    }
    function f(x){
        if (isNaN(i1.value)|| isNaN(i2.value)){
            s.innerText="输入的数据类型错误";
            return;
        }
        switch (x){
            case 1:
                s.innerText=i1.value*1+i2.value*1;
                break;
            case 2:
                s.innerText=i1.value-i2.value;
                break;
            case 3:
                s.innerText=i1.value*i2.value;
                break;
            case 4:
                s.innerText=i1.value/i2.value;
                break;

        }
    }
</script>
</body>
</html>